import React from 'react';
import { Card, List, Badge } from 'antd';

const AnnouncementWidget: React.FC = () => {
  const announcements = [
    { id: 1, title: '系统维护通知', type: 'warning', time: '2小时前' },
    { id: 2, title: '新功能上线', type: 'success', time: '1天前' },
    { id: 3, title: '重要更新', type: 'error', time: '2天前' },
  ];

  const getStatusColor = (type: string) => {
    switch (type) {
      case 'warning': return 'orange';
      case 'success': return 'green';
      case 'error': return 'red';
      default: return 'blue';
    }
  };

  return (
    <Card 
      title="公告" 
      size="small" 
      className="h-full"
      styles={{ body: { padding: '8px' } }}
    >
      <List
        size="small"
        dataSource={announcements}
        renderItem={(item) => (
          <List.Item className="px-2 py-1">
            <div className="flex items-center justify-between w-full">
              <div className="flex items-center space-x-2 flex-1">
                <Badge color={getStatusColor(item.type)} />
                <span className="text-sm truncate">{item.title}</span>
              </div>
              <span className="text-xs text-gray-400">{item.time}</span>
            </div>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default AnnouncementWidget;